<template>
	<div class="pt-20px pb-20px min-h-600px">
		<div class="flex justify-between items-center">
			<div class="flex items-center">
				<el-icon size="24px" @click="back" class="cursor-pointer">
					<ArrowLeftBold />
				</el-icon>
				<p class="text-24px font-bold ml-20px">转账</p>
			</div>
			<p class="flex items-center">
			<p class="text-18px mr-20px">交易历史记录</p>
			<el-button type="primary" color="#EAECEF" style="color:#000000;height:40px;width:70px;"
				@click="jumpTo('/more/receive')">收款</el-button>
			</p>
		</div>
		<div class="mt-100px flex items-center justify-center">
			<div class="w-60% h-100px">
				<el-steps style="width: 100%;height:40px;" :active="step">
					<el-step>
						<template #title>
							<p class="text-15px text-#000000">收款人</p>
						</template>
					</el-step>
					<el-step>
						<template #title>
							<p class="text-15px text-#000000">输入金额</p>
						</template>
					</el-step>
					<el-step>
						<template #title>
							<p class="text-15px text-#000000">确认付款</p>
						</template>
					</el-step>
				</el-steps>
			</div>
		</div>
		<div class="w-full flex justify-center">
			<div class="w-60%" v-if="step == 1">
				<InputId @next="next"></InputId>
			</div>
			<div class="w-60%"  v-if="step == 2">
				<InputSum @next="next" @back="backStep"></InputSum>
			</div>
			<div class="w-60%"  v-if="step == 3">
				<ConfirmInput @back="backStep" @confirm="confirm"></ConfirmInput>
			</div>
		</div>
		<VerifyDialog :show="showVerifyDialog" @close="closeVerifyDialog" ></VerifyDialog>
	</div>
</template>
<script setup lang="ts">
import InputId from '../components/InputId.vue';
import InputSum from '../components/InputSum.vue';
import ConfirmInput from '../components/ConfirmInput.vue';
import VerifyDialog from '../components/VerifyDialog.vue';
import useJump from '@/utils/jump';

const { back, jumpTo } = useJump();

const step = ref<1|2|3>(1);

const next = () => {
	if(step.value < 3 && step.value > 0){
		step.value++;
	}
}

const backStep = () => {
	if(step.value > 1 && step.value < 4){
		step.value--;
	}
}

const showVerifyDialog = ref<any>(false);
const closeVerifyDialog = (val:boolean) => {
	showVerifyDialog.value = val;
	jumpTo('/more/transferResult');
}
const confirm = () => {
	showVerifyDialog.value = true;
}
</script>
<style lang="scss" scoped>
::v-deep .el-step__head {
	display: flex !important;
	align-items: center !important;
}

::v-deep .el-step__line-inner,
::v-deep .el-step.is-horizontal .el-step__line {
	height: 4px;
}

::v-deep .el-step.is-horizontal .el-step__line {
	margin-top: 6px;
}

::v-deep .el-step__line-inner {
	background-color: #114CEE;
}

::v-deep .el-step__icon {
	padding: 16px;
	background-color: #EBEBEB;
	border-color: #EBEBEB;
}
::v-deep .el-step__icon-inner{
	color:#fff;
}
::v-deep .is-finish .el-step__icon {
	background-color: #114CEE;
	border-color: #114CEE;
	color: #fff;
}
::v-deep .el-step__title{
	position: relative;
	left:-10px;
}
</style>
